ElementUI快速入门 |
您所在的位置：网站首页 › element ui 替代品 › ElementUI快速入门 |
ElementUI快速入门
|
本文主要从几个方面快速入门ElementUI 1、什么是ElementUI ？ 掌握elementUI脚手架搭建 2、掌握elementUI的table组件的使用，实现列表功能 3、掌握elementUI的pagination组件的使用，实现分页功能 4、掌握elementUI的form相关组件的使用，实现条件查询功能 5、掌握elementUI的dialog组件和$message的使用，实现弹出窗口和消息提示功能 6、掌握elementUI的select组件的使用，实现下拉列表功能实现新增数据和修改数据的功能 7、掌握confirm的使用，实现询问框，实现删除功能 1、什么是ElementUI？Element 饿了么前端出品的一套 基于 Vue 2.0 的桌面端组件库 官网: http://element.eleme.io/#/zh-CN 1.1、搭建elementUI脚手架(vue-admin-template)# Clone projectgit clone https://github.com/PanJiaChen/vue-admin-template.git# Install dependenciesnpm install# Serve with hot reload at localhost:9528npm run dev# Build for production with minificationnpm run build# Build for production and view the bundle analyzer reportnpm run build --report在执行完npm run dev后发现浏览器自动打开了vue-admin-template登录页面，点击登录，此时模板页面就搭建好了。 打开文件夹vue-admin-template，主要的目录结构如下图所示：
1.2.1 关闭语法规范性检查 修改config/index.js ，将useEslint的值改为false。 此配置作用: 是否开启语法检查，语法检查是通过ESLint 来实现的。 我们现在科普一下,什么是ESLint : ESLint 是一个语法规则和代码风格的检查工具，可以用来保证写出语法正确、风格统一的代码。如果我们开启了Eslint , 也就意味着要接受它非常苛刻的语法检查，包括空格不能少些或多些，必须单引不能双引，语句后不可以写 分号等等，这些规则其实是可以设置的。作为初学者，最好先关闭这种校验，否则会浪费很多精力在语法的规范性上。如果以后做真正的企业级开发，建议开启。 1.2.2 国际化设置 打开main.js 找到这句代码 import locale from 'element‐ui/lib/locale/lang/en' 我们将en修改为zn-CNimport locale from 'element‐ui/lib/locale/lang/zh‐CN' 修改后组件都是按照中文的习惯展示 1.2.3 与easy-mock对接 (1)修改config下的dev.env.js中的BASE_API为easy-mock的Base URL ....BASE_API: ''http://10.211.5.3:7300/mock/5af314a4c612420d0d7650c7'',....修改后发现无法登录上vue-admin-templates，原因是修改了BASE_API，需要在自己的Easy-mock中修改验证 (2)easy-mock添加登陆认证模拟数据 地址: /user/login提交方式:post内容: {'code': 20000,'data': {'roles': ['admin'],'role': ['admin'],'name': 'admin','avatar': 'https://wpimg.wallstcn.com/f778738c‐e4f8‐4870‐b634‐56703b4acafe.gif'}}(3)添加返回用户信息url模拟数据 地址:/user/info提交方式:get内容: {'code': 20000,'data': {'roles': ['admin'],'role': ['admin'],'name': 'admin','avatar': 'https://wpimg.wallstcn.com/f778738c‐e4f8‐4870‐b634‐56703b4acafe.gif'}}此时又可以登录上vue-admin-template，且成功与自己的easy-mock对接上了。 2.elementUI的table组件,实现列表展示(1)在src/api/下创建gathering.js，书写代码： import request from '@/utils/request'export default{getList(){return request({url:'/gathering/gathering',method:'get'});}}导入request模块实际上是对ajax的封装(在utils/request.js中)，上述的url和method即为请求的url和method (2)在views/table中创建 gathering.vue vue主要分为视图区、逻辑区/代码区(用于控制视图区的显示) //将我们刚才书写的gathering.js导入到该vue中,并声明其作为变量gatheringApiimport gatheringApi from '@/api/gathering'export default {data() {return {list: []}},created() {this.fetchData()},methods: {fetchData() {gatheringApi.getList().then(response => {this.list = response.data})}}}(3)修改router/index.js中的path和import('@/views/table/gathering') 其中path为访问路径，import为views文件夹中的table文件夹中的gathering.vue文件 {path: '/gathering',component: Layout,children: [{path: 'index',name: 'Form',component: () => import('@/views/table/gathering'),meta: { title: '活动管理', icon: 'form' }}]}(4)reload工程 ： npm run dev (5)plus：如果此时你在开发者工具中能正常接收数据，但是无法显示，考虑easy-mock中的接口设置，返回值是否为20000等。 {'code': 20000,'flag': true,'message': '@string','data|10': [{'id': '@string','name': '@cword(8,12)','summary': '@cword(20,40)','detail': '@cword(20,40)','sponsor': '@string','image': '@image','starttime': '@date','endtime': '@date','address': '@county(true)','enrolltime': '@date','state': '@string','city': '@string'}]}3.使用pagination实现分页我们已经通过表格组件完成了列表的展示，接下来需要使用分页组件完成分页功能 一般对于分页，都需要前端传递给后端两个参数：①当前页码 ②每页显示条数 由于笔者项目中用到了Easy Mock，所以我们第一步应该修改Easy Mock中的接口，产生更真实的模拟数据 (1)修改接口/gathering/gathering/search/{page}/{size} method:POST (2)在gathering.js中添加新方法search，page当前页码，size每页显示条数，searchMap查询条件 参考返回数据结构： 此时js部分(逻辑处理层)我们已经完成，参考官方文档完成分页组件UI层： plus：@代表调用的方法，当每页显示个数和当前页码改变时会调用方法fetchData，:name代表属性 plus：如果加入该到中报错，考虑在下添加一个标签，因为下只能有一个标签加入后即只有一个标签，否则将存在标签和标签，故报错。 4. 使用分页+条件查询需求:在分页列表的基础上实现条件查询功能【使用到了表单控件、文本输入控件、日期输入控件、行内表单等】 总体template代码: 查询......5-6. 弹出窗口、消息提示、select下拉框需求：界面中加入'新增'按钮，点击弹出编辑窗口，点击“修改”按钮，关闭窗口并刷新表格，弹出提示(成功或失败) 涉及知识点：dialog组件、$message、switch开关、textarea文本域、form表单、select下拉框等 参考官方文档： (如何调出窗口并关闭窗口) plus：注意！需要在return内部声明一个实体对象，用于存储表单数据 ，如：renturn{ pojo:{} } (省略了一部分代码)新增city.js，并导出(参考gathering.js)。在gathering.vue中导入city，并在打开视图时就加载城市： created() {this.fetchData()cityApi.getList().then(response => {this.cityList = response.data})}不要忘记在return中加入city这个实体对象，否则为空报错。如return{ cityList:[] } 视图层代码： 保存关闭当我们点击保存按钮的时候，则触发几个动作：①弹出消息提示框(消息内容来自于响应体中的message) ②判断消息状态是否为true，为true则刷新列表(调用之前的刷新列表方法) ③关闭窗口(设置dialogVisible = false)，主要代码如下： ...保存关闭......methods:{handlerSave(){gatheringApi.save(this.pojo).then(response => {alert(response.message)if(response.flag){ //如果成功this.fetchData(); //刷新列表}})this.dialogFormVisible=false //关闭窗口}}...7、在列表显示页面右侧执行修改操作需求：在表格的操作列增加'修改'按钮，点击修改按钮弹出窗口并显示数据，点击保存按钮保存 修改并刷新表格。 需求分析：在点击修改按钮时候，首先需要打开窗口(修改dialogVisible = true)，其次获取点击的数据行id，根据该id查询数据并回显，在点击保存按钮时候，执行上面所讲的保存操作。 由于我们使用Easy-Mock模拟数据，我们首先需要修改根据id查询数据的接口 (1)修改easymock接口/gathering/gathering/{id} (GET) (2)修改src/api/gathering.js，增加方法定义 findById(id) {return request({url: `/gathering/gathering/${id}`,method: 'get'})}(3)修改src/views/table/gathering.vue的js脚本部分,新增handleEdit()方法 handleEdit(id){this.dialogFormVisible=true //打开窗口gatheringApi.findById(id).then(response=>{if(response.flag){this.pojo=response.data}})}(4)在表格table中增加模板列 ,模板列中防止修改按钮，调用handleEdit方法 修改fixed='right'的作用是定义此列为右固定列slot-scope用于指定当前行的上下文。 使用scope.row可以获取行对象，此处我们需要获得当前行的id，故使用scope.row.id |
【本文地址】
今日新闻 |
推荐新闻 |